<nz-skeleton [nzActive]="true" [nzLoading]="loading" class="pt-3">
  <ng-container>
    <ng-container *ngIf="!timeLogs?.length">
      <div class="pt-4 pb-5 text-center">
        <div class="no-data-img-holder mx-auto mb-3">
          <img src="/assets/images/empty-box.webp" class="img-fluid" alt="">
        </div>
        <span nz-typography class="no-data-text">No time logs to show.</span>
      </div>
    </ng-container>
    <ng-container *ngFor="let log of timeLogs">
      <div class="single-log">
        <nz-card [nzTitle]="cardTitle" class="breakdown-card">
          <div class="single-day-logs">
            <nz-timeline *ngIf="log.logs.length">
              <nz-timeline-item *ngFor="let log_item of log.logs">
              <span
                nz-typography class="line-28 time-log-text" (click)="openTask(log_item.task_id, log_item.project_id)">Logged <b class="weight-500">{{log_item.time_spent_string}}</b> for <b class="weight-500">{{log_item.task_name}}</b> in <b class="weight-500">{{log_item.project_name}}</b>
              <nz-tag class="ms-2 mt-1">{{log_item.task_key}}</nz-tag></span>
              </nz-timeline-item>
            </nz-timeline>
            <ng-container *ngIf="!log.logs.length">
              <div class="d-block mb-4">
                No time logs to show.
              </div>
            </ng-container>
          </div>
        </nz-card>
        <ng-template #cardTitle>
          <div class="log-day">
            <span nz-typography>{{log.log_day | date : 'MMM dd, YYYY'}}</span>
          </div>
        </ng-template>
      </div>
      <nz-divider></nz-divider>
    </ng-container>
  </ng-container>
</nz-skeleton>
